
//   #############  此处方法适用于WKWebView ################     //

// var isPlaying = true;
// var renderId;
// var loadId;
// var animationState = null;
// var skeletonAnimation = null;
//
// function createObjec(jsonName, atlasName, scale, aniamtionName) {
//     var ani = new Object;
//
//     var canvas = document.getElementsByTagName("canvas")[0];
//     canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
//     var context = new spine.webgl.ManagedWebGLRenderingContext(canvas);
//     var assetManager = new spine.webgl.AssetManager(context, "../source/assets/");
//     var renderer = new spine.webgl.SceneRenderer(canvas, context);
//     var time = new spine.TimeKeeper();
//     var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context));
//     var skeleton = null;
//     // var animationState = null;
//     // var skeletonAnimation = null;
//
//     var _jsonName_ = jsonName;
//     var _atlasName_ = atlasName;
//     var _animationName_ = aniamtionName;
//     var _scale_ = scale > 0 ? scale : 0.2;
//
//     // var isPlaying = true;
//
//
//     assetManager.loadText(jsonName);
//     assetManager.loadTextureAtlas(atlasName);
//     loadId = requestAnimationFrame(load);
//
//     function loadSkeletonAnimation(jsonName, atlasName, scale) {
//         var atlas = assetManager.get(atlasName);
//         var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
//         skeletonJson.scale = scale;
//         var skeletonData = skeletonJson.readSkeletonData(assetManager.get(jsonName));
//         var animationStateData = new spine.AnimationStateData(skeletonData);
//
//         skeleton = new spine.Skeleton(skeletonData);
//         animationState = new spine.AnimationState(animationStateData);
//
//         var offset = new spine.Vector2();
//         var size = new spine.Vector2();
//
//         skeleton.updateWorldTransform();
//         skeleton.getBounds(offset, size, []);
//         renderer.camera.position.x = offset.x + size.x / 2;
//         renderer.camera.position.y = offset.y + size.y / 2;
//         renderer.camera.zoom = size.x > size.y ? size.x / canvas.width : size.y / canvas.height;
//         // renderer.setClearColor(0xffffff,0.0);
//         animationState.setAnimation(0, _animationName_, true);
//
//
//         animationState.addListener({
//             start: function(track) {
//                 console.log("Animation on track " + track.trackIndex + " started");
//                 window.webkit.messageHandlers.animationMethod.postMessage("start");
//                 sp.nslog('1', 'start');
//             },
//             interrupt: function(track) {
//                 isPlaying = false;
//                 console.log("Animation on track " + track.trackIndex + " interrupted");
//                 window.webkit.messageHandlers.animationMethod.postMessage("interrupt");
//                 sp.nslog('0', 'interrupt');
//             },
//             end: function(track) {
//                 isPlaying = false;
//                 console.log("Animation on track " + track.trackIndex + " ended");
//                 window.webkit.messageHandlers.animationMethod.postMessage("end");
//                 sp.nslog('0', 'end');
//             },
//             disposed: function(track) {
//                 isPlaying = false;
//                 console.log("Animation on track " + track.trackIndex + " disposed");
//                 window.webkit.messageHandlers.animationMethod.postMessage("disposed");
//                 sp.nslog('0', 'disposed');
//             },
//             complete: function(track) {
//                 isPlaying = false;
//                 alert("complete");
//                 console.log("Animation on track " + track.trackIndex + " completed");
//                 window.webkit.messageHandlers.animationMethod.postMessage("complete");
//                 sp.nslog('0', 'complete');
//             },
//             event: function(track, event) {
//                 isPlaying = false;
//                 console.log("Event on track " + track.trackIndex + ": " + JSON.stringify(event));
//                 sp.nslog('0', 'event');
//             }
//         });
//
//         return { skeleton: skeleton, animationState: animationState };
//     }
//
//
//     function load () {
//         if (assetManager.isLoadingComplete()) {
//             console.log("assetManager.isLoadingComplete");
//             skeletonAnimation = loadSkeletonAnimation(_jsonName_, _atlasName_, _scale_);
//
//             renderId = requestAnimationFrame(render);
//
//         } else {
//             loadingScreen.draw(false);
//             loadId = requestAnimationFrame(load);
//         }
//     }
//
//     function render () {
//         // context.gl.clearColor(0.0, 0.0, 0.0, 0.0);
//         // context.gl.clear(context.gl.COLOR_BUFFER_BIT);
//
//         if (isPlaying) {
//             context.gl.clearColor(0.0, 0.0, 0.0, 0.0);
//             context.gl.clear(context.gl.COLOR_BUFFER_BIT);
//
//             time.update();
//             skeletonAnimation.animationState.update(time.delta);
//             skeletonAnimation.animationState.apply(skeletonAnimation.skeleton);
//             skeletonAnimation.skeleton.updateWorldTransform();
//
//             renderer.begin();
//             renderer.drawSkeleton(skeletonAnimation.skeleton, false);
//             renderer.end();
//
//             loadingScreen.draw(true);
//
//             renderId = requestAnimationFrame(render);
//         } else {
//
//         }
//     }
//
//     function renderEnd() {
//         renderer.end();
//     }
//
//     return ani;
// };
//
// function animationStop(){
//     sp.nslog('0', 'animationStop');
//     isPlaying = false;
//     if(loadId) {
//         cancelAnimationFrame(loadId);
//         sp.nslog('0', 'cancelAnimationFrame:Load');
//     }
//
//     if(renderId) {
//         cancelAnimationFrame(renderId);
//         sp.nslog('0', 'cancelAnimationFrame:Render');
//     }
//     skeletonAnimation.animationState.clearTracks();
// }



var isPlaying = true;
var renderId;
var loadId;
var animationState = null;
var skeletonAnimation = null;
var playTime = 0;

function createObjec(jsonName, atlasName, scale, aniamtionName) {

    var canvas = document.getElementsByTagName("canvas")[0];
    canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
    var context = new spine.webgl.ManagedWebGLRenderingContext(canvas);
    var assetManager = new spine.webgl.AssetManager(context, "../source/assets/");
    var renderer = new spine.webgl.SceneRenderer(canvas, context);
    var time = new spine.TimeKeeper();
    var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context));
    var skeleton = null;
    // var animationState = null;
    // var skeletonAnimation = null;

    var _jsonName_ = jsonName;
    var _atlasName_ = atlasName;
    var _animationName_ = aniamtionName;
    var _scale_ = scale > 0 ? scale : 0.2;

    // var isPlaying = true;


    assetManager.loadText(jsonName);
    assetManager.loadTextureAtlas(atlasName);

    loadId = requestAnimationFrame(load);

    function loadSkeletonAnimation(jsonName, atlasName, scale) {
        var atlas = assetManager.get(atlasName);
        var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
        skeletonJson.scale = 1;
        var skeletonData = skeletonJson.readSkeletonData(assetManager.get(jsonName));
        var animationStateData = new spine.AnimationStateData(skeletonData);

        skeleton = new spine.Skeleton(skeletonData);
        animationState = new spine.AnimationState(animationStateData);

        var offset = new spine.Vector2();
        var size = new spine.Vector2();

        skeleton.updateWorldTransform();
        skeleton.getBounds(offset, size, []);
        renderer.camera.position.x = offset.x + size.x / 2;
        renderer.camera.position.y = offset.y + size.y / 2;
        renderer.camera.zoom = scale;//size.x > size.y ? size.x / canvas.width : size.y / canvas.height;
        // renderer.setClearColor(0xffffff,0.0);
        // animationState.setToSetupPose();
        animationState.setAnimation(0, _animationName_, true);

        animationState.addListener({
            start: function(track) {
                console.log("Animation on track " + track.trackIndex + " started");
                window.webkit.messageHandlers.animationMethod.postMessage("start");
                sp.nslog('1', 'start');
            },
            interrupt: function(track) {
                isPlaying = false;
                console.log("Animation on track " + track.trackIndex + " interrupted");
                window.webkit.messageHandlers.animationMethod.postMessage("interrupt");
                sp.nslog('0', 'interrupt');
            },
            end: function(track) {
                isPlaying = false;
                console.log("Animation on track " + track.trackIndex + " ended");
                window.webkit.messageHandlers.animationMethod.postMessage("end");
                sp.nslog('0', 'end');
            },
            disposed: function(track) {
                isPlaying = false;
                console.log("Animation on track " + track.trackIndex + " disposed");
                window.webkit.messageHandlers.animationMethod.postMessage("disposed");
                sp.nslog('0', 'disposed');
            },
            complete: function(track) {
                isPlaying = false;
                alert("complete");
                console.log("Animation on track " + track.trackIndex + " completed");
                window.webkit.messageHandlers.animationMethod.postMessage("complete");
                sp.nslog('0', 'complete');
            },
            event: function(track, event) {
                isPlaying = false;
                console.log("Event on track " + track.trackIndex + ": " + JSON.stringify(event));
                sp.nslog('0', 'event');
            }
        });

        return { skeleton: skeleton, animationState: animationState };
    }


    function load () {
        if (assetManager.isLoadingComplete()) {
            console.log("assetManager.isLoadingComplete");
            skeletonAnimation = loadSkeletonAnimation(_jsonName_, _atlasName_, _scale_);
            renderId = requestAnimationFrame(render);

        } else {
            // loadingScreen.draw(false);
            loadingScreen.hidden = true;
            loadId = requestAnimationFrame(load);
        }
    }

    function render () {
        if (isPlaying) {

            context.gl.clearColor(0.0, 0.0, 0.0, 0.0);
            context.gl.clear(context.gl.COLOR_BUFFER_BIT);

            time.update();
            skeletonAnimation.animationState.update(time.delta);
            skeletonAnimation.animationState.apply(skeletonAnimation.skeleton);
            skeletonAnimation.skeleton.updateWorldTransform();

            renderer.begin();
            renderer.drawSkeleton(skeletonAnimation.skeleton, false);
            renderer.end();
            loadingScreen.hidden = false;
            loadingScreen.draw(true);

            renderId = requestAnimationFrame(render);
        }
    }

};

function animationStop(){
    sp.nslog('0', 'animationStop');
    isPlaying = false;
    if(loadId) {
        cancelAnimationFrame(loadId);
        sp.nslog('0', 'cancelAnimationFrame:Load');
    }

    if(renderId) {
        cancelAnimationFrame(renderId);
        sp.nslog('0', 'cancelAnimationFrame:Render');
    }
    skeletonAnimation.animationState.clearTracks();
}